<template lang="html">
  <div id="login" class="box">
    <div class="wpr box">
      <h1>您好！</h1>
      <small>欢迎使用<font>吉星分期</font></small>
      <el-form :rules="rules" :model='ruleForm' ref="ruleFormN">
        <el-form-item prop="tel">
          <el-input type="text" v-model.number="ruleForm.tel" ref="tels" placeholder="手机号码" value="" />
        </el-form-item>
        <el-form-item prop="code">
          <el-input type="text" v-model.number="ruleForm.code" placeholder="验证码" value="" />
          <button disabled class="el-button el-button--info el-button--mini is-round getCode" ref="getCode" @click="getCode('getCode')">{{ codeVal }}</button>
        </el-form-item>
      </el-form>
      <button class="el-button el-button--primary is-round btnsub" @click="submitForm('ruleFormN')"><span>登 录</span></button>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapGetters, mapActions} from 'vuex';
export default {
  data () {
    return {
      codeVal: '获取验证码',
      disStatus:true,
      timer:null,
      ruleForm: {
        tel: '',
        code: ''
      },
      rules: {
        tel: [
          {validator: this.checkTel, trigger: 'blur'}
        ],
        code: [
          {validator: this.checkCode, trigger: 'blur'}
        ]
      }
    }
  },
  mounted(){
    this.setTit('登录页')
  },
  methods: {
    ...mapMutations({
      revise:'revise'
    }),
    ...mapGetters([
      'starLoading','closeLoading'
    ]),
    // ...mapGetters([
    //   'starLoading','closeLoading'
    // ]),
    checkTel(rule, value, callback) {
      let val = value.toString().trim()
      let btn = this.$refs['getCode']
      console.log(val, val.length)
      btn.setAttribute('disabled', 'disabled')
      if (!val) {
        callback(new Error('手机号不能为空'))
      } else if (val.length !== 11 || !Number.isInteger(value) || !/^1[3|4|5|7|8]\d{9}$/.test(val)) {
        callback(new Error('手机格式不对'))
      } else {
        if(this.disStatus){
          btn.removeAttribute('disabled')
          this.disStatus = false;
        }
        callback()
      }
    },
    checkCode(rule, value, callback) {
      var val = value.toString().trim()
      if (!val) {
        callback(new Error('验证码不能为空'))
      } else if (val.length !== 4 || !Number.isInteger(value)) {
        callback(new Error('验证码格式不对'))
      } else {
        callback()
      }
    },
    submitForm(refName) {
      this.$refs[refName].validate(valid => {
        if (valid) {
          this.starLoading()();
          console.log('ok 后台 校验验证码')
          setTimeout(() => {
            this.closeLoading()();
            let userId = 666;
            this.revise({userTel:this.ruleForm.tel,userId:userId})
            this.$router.push({path:`/confirm/${userId}`})
            clearInterval(this.timer)
          },1000)

        } else {
          console.log('err')
          return false
        }
      })
    },
    getCode() {
      alert('后台 获取验证码 临时：6666')
      let btn = this.$refs['getCode'],
          tel = this.$refs.tels.$refs.input,
          num = 6;
          btn.setAttribute('disabled', 'disabled')
          tel.setAttribute('disabled', 'disabled')
        this.codeVal = (num + 's后重新重新发送')
        this.timer = setInterval(() => {
          console.log('run')
           if (num > 1) {
              this.codeVal = (--num + 's后重新重新发送')
           } else {
               btn.removeAttribute('disabled')
               this.codeVal = ('发送验证码')
               this.disStatus = true;
               tel.removeAttribute('disabled')
               clearInterval(this.timer)
           }
       }, 1000)
    }
  }
}
</script>

<style lang="scss">
#login{
  position:absolute;width:100%;height:100%;right:0;bottom:0;padding-top: 12.2%;
}
#login .wpr{
  padding:0 .95rem;line-height: 2;
  font-size: .3rem;
  h1{font-size: .66rem;font-weight: 400;color:#666;letter-spacing: .06rem;}
  small{display: block;margin-bottom:1.46rem;font-size: .3rem;letter-spacing: .03rem;}
  small font{color:#f5cc3f;}
  input{display: block;width: 100%;padding:0 .15rem;border-radius: 0;height:.92rem;border:none;border-bottom:1px #f6cd2a solid;}
  input[type="number"]{}
  ::-webkit-input-placeholder {
      color:#999;
  }
  .el-form-item{margin-bottom:.4rem;}
  button{font-size: .3rem;}
  .btnsub{margin-top:1.4rem;font-size: .34rem;width:2.2rem;line-height: .9rem;padding:0;border-color:#f5cc3f;background-color: #f5cc3f;}
  .getCode{position: absolute;right:0;top:.12rem;font-size: .26rem;}
  .getCode[disabled]{color: #909399;background: #f4f4f5;border-color: #d3d4d6;}
}

</style>
